<script>
			var module_inits = [];
			
			function load_init_modules() {
				for (var i = 0; i < module_inits.length; i++) {
					module_inits[i]();
				}
			}
			
			function call_me(fun) {
				module_inits.push(fun);
			}
			onload = load_init_modules;
		</script>

		<script>
			var slider_images_url = [
			{volist name='pics' id='vo'}
			'{$vo.url}',
			{/volist}
			];
			var e_desc = '{$title}';
		</script>

<style type="text/css">
	
	*
	{
        padding: 0px;
        margin: 0px;
        -webkit-box-sizing: border-box;
	}

    body
    {
        background-color: black;
    }

    #scene
    {
    	position: absolute;
    	top: 100px;
    	left: 0px;
    	width: 500px;
    	height: 500px;
    	overflow: hidden;
    }

    .cover
    {
    	margin-bottom: 10px;
    	width: 500px;
    	height: 500px;
    	background-color: black;
    	-webkit-border-radius: 25px;
    	overflow: hidden;
    }

/*
    @-webkit-keyframes scroll_a_0
    {
    	0%   {-webkit-transform: translateY(0px)}
    	20% {-webkit-transform: translateY(-560px)}
    	36%  {-webkit-transform: translateY(-470px)}
    	52% {-webkit-transform: translateY(-540px)}
    	68% {-webkit-transform: translateY(-490px)}
    	84% {-webkit-transform: translateY(-520px)}
    	100% {-webkit-transform: translateY(-510px)}
    }
*/

    @-webkit-keyframes scroll_a_0
    {
    	0%   {-webkit-transform: translateY(0px)}
    	30%  {-webkit-transform: translateY(-560px)}
    	47%  {-webkit-transform: translateY(-472px)}
    	64%  {-webkit-transform: translateY(-536px)}
    	81%  {-webkit-transform: translateY(-505px)}
    	100% {-webkit-transform: translateY(-510px)}
    }

    @-webkit-keyframes scroll_a_1
    {
    	0%   {-webkit-transform: translateY(0px)}
    	30%  {-webkit-transform: translateY(-560px)}
    	47%  {-webkit-transform: translateY(-472px)}
    	64%  {-webkit-transform: translateY(-536px)}
    	81%  {-webkit-transform: translateY(-505px)}
    	100% {-webkit-transform: translateY(-510px)}
    }

    @-webkit-keyframes scroll_b_0
    {
    	0%   {-webkit-transform: translateY(0px)}
    	40%  {-webkit-transform: translateY(-1070px)}
    	55%  {-webkit-transform: translateY(-985px)}
    	70%  {-webkit-transform: translateY(-1040px)}
    	85%  {-webkit-transform: translateY(-1015px)}
    	100% {-webkit-transform: translateY(-1020px)}
    }

    @-webkit-keyframes scroll_b_1
    {
    	0%   {-webkit-transform: translateY(0px)}
    	40%  {-webkit-transform: translateY(-1070px)}
    	55%  {-webkit-transform: translateY(-985px)}
    	70%  {-webkit-transform: translateY(-1040px)}
    	85%  {-webkit-transform: translateY(-1015px)}
    	100% {-webkit-transform: translateY(-1020px)}
    }

</style>

<div id="scene">

	<div id="band" style="animation: scroll_a_0 0.9s ease-in-out both;">
		<div id="cover1" class="cover" style="background-image: url(&quot;__DIR__{$dir}/img/&quot;); background-size: 502px, 613.442px; background-position: -1px 50%, -57px 50%; background-repeat: no-repeat;">
		</div>
		<div id="cover2" class="cover" style="background-image: url(&quot;__DIR__{$dir}/img/&quot;); background-size: 502px, 892.444px; background-position: -1px 50%, -197px 50%; background-repeat: no-repeat;">
		</div>
		<div id="cover3" class="cover" style="background-image: url(&quot;__DIR__{$dir}/img/&quot;); background-size: 893.129px, 502px; background-position: -197px 50%, -1px 50%; background-repeat: no-repeat;">
		</div>
		<div id="cover4" class="cover">
		</div>
	</div>

</div>

<script>

curr_index  = 0;
show_images = [];
started = false;
next_show_timer = 0;
animation_timer = 0;
scroll_a_i = 0;

function reset_scene()
{
	clearTimeout(animation_timer);
	clearTimeout(next_show_timer);

	curr_index = 0;
	show_images = [];
	animation_timer = 0;
	next_show_timer = 0;
	started = false;

	band.style.webkitAnimation = '';

	load_images();
	begin_show();
}

function rand(min, max)
{
	return min + Math.floor(Math.random()*(max-min+1));
}

function calc_image(event)
{
	var img = event.target;
	img.ok = true;
	var w = img.width;
	var h = img.height;

	h = h * (502 / w);
	w = 502;

	if(h < 502)
	{
		w = w * (502 / h);
		h = 502;
	}

	img.w = w;
	img.h = h;

	img.si = w + 'px, ' + h + 'px';
	img.pos = Math.floor((500 - w)/2) + 'px, ' + Math.floor((500 - h)/2) + 'px';

	begin_show();
}

function set_bkimg(coverid, img)
{
	var cover = document.getElementById(coverid);
	cover.style.backgroundImage = 'url(' + img.src + ')';
	cover.style.backgroundPosition = img.pos;
	console.log(img.pos);
	cover.style.backgroundSize = img.si;
	cover.style.backgroundRepeat = 'no-repeat';
}

function clean_animation()
{
	next_show_timer = setTimeout('next_show()', 500);
}

function next_show()
{
	var img1 = curr_index;
	var img2 = (curr_index + 1) % show_images.length;
	var img3 = (curr_index + 2) % show_images.length;

	curr_index = (curr_index + 1) % show_images.length;

	var ani = rand(0, 1);

	if(ani == 0)
	{
		set_bkimg('cover1', show_images[img1]);
		set_bkimg('cover2', show_images[img2]);
		set_bkimg('cover3', show_images[img3]);

		var ani = 'scroll_a_' + scroll_a_i;
		scroll_a_i = (scroll_a_i + 1) % 2;

		band.style.webkitAnimation = ani + ' 0.9s ease-in-out both';
		animation_timer = setTimeout('next_show()', 2200);
	}
	else
	{
		set_bkimg('cover1', show_images[img1]);
		set_bkimg('cover2', show_images[img3]);
		set_bkimg('cover3', show_images[img2]);
		set_bkimg('cover4', show_images[img3]);

		var ani = 'scroll_b_' + scroll_a_i;
		scroll_a_i = (scroll_a_i + 1) % 2;

		band.style.webkitAnimation = ani + ' 1.6s ease-in-out both';
		animation_timer = setTimeout('next_show()', 4200);
	}
}

function begin_show()
{
	if(!started && show_images[0].ok == true && show_images[1].ok == true && show_images[2].ok == true)
	{
		started = true;
		next_show();
	}
}

function load_images()
{
    if(slider_images_url.length == 1)
    {
        slider_images_url[1] = slider_images_url[0];
    }

    if(slider_images_url.length == 2)
    {
        slider_images_url[2] = slider_images_url[0];
    }

	for(var i=0; i<slider_images_url.length; i++)
	{
		var one = new Image();
		one.index = i;
		one.ok = false;
		one.onload = calc_image;
		show_images.push(one);
		one.src = slider_images_url[i];
		console.log(one.src);
	}
}

function roll_init()
{
	load_images();
}

call_me(roll_init);

</script>



	<link type="text/css" rel="stylesheet" href="__DIR__{$dir}/css/guanzhu.css">
	<link rel="stylesheet" type="text/css" href="__DIR__{$dir}/css/buttons.css">

	<style type="text/css">
		@-webkit-keyframes zhuan
		{
			0%
			{
				-webkit-transform:rotate(0deg);
			}

			100%
			{
				-webkit-transform:rotate(360deg);
			}
		}


		@-webkit-keyframes aa_out_bounce_left
		{
		    0%{
		        -webkit-transform:translateX(0)
		    }
		    20%{
		        -webkit-transform:translateX(20px)
		    }
		    100%{
		        -webkit-transform:translateX(-125px)
		    }
		}
		@-webkit-keyframes aa_in_bounce_center
		{
		    0%{
		        opacity:0;
		        -webkit-transform:scale(.3)
		    }
		    50%{
		        opacity:1;
		        -webkit-transform:scale(1.05)
		    }
		    70%{
		        -webkit-transform:scale(.9)
		    }
		    100%{
		        -webkit-transform:scale(1)
		    }
		}
		@-webkit-keyframes jinbi
		{
			from {-webkit-transform: rotateY(0deg);}
			to   {-webkit-transform: rotateY(180deg);}
		}
		.jubao-item
		{
			position: relative;
			float: left;
			width: 360px;
			height: 55px;
			top: 0px;
			font-size: 20px;
			line-height: 55px;
			margin-left: 20px;
			border-bottom: 1px solid #EBEBEB;
		}
		.jubao-radio
		{
			position: absolute;
			right: 10px;
			width: 25px;
			height: 25px;
			top: 20px;
		}

		.jubao-detail
		{
			position: relative;
			float: left;
			width: 360px;
			margin-left: 20px;
		}
		.jubao-detail textarea
		{
			width: 360px;
		    height: 80px;
		    font-size: 20px;
		    resize: none;
		    line-height: 40px;
		    border: none;
		    background-color: #eee;
		    border-radius: 10px;
		    padding-left: 10px;
		}
		@-webkit-keyframes guangzhu_ani
		{
			from  {-webkit-transform: scale(1);}
			to    {-webkit-transform: scale(1.05);}
		}
		@-webkit-keyframes che_ani
		{
		    0%    {-webkit-transform: translate(-20px,0px);opacity: 1}
		    8%  {-webkit-transform: translate(100px,0px) scale(0.95,1.05);opacity: 1}
		    10%  {-webkit-transform: translate(100px,0px) scale(1,1);opacity: 1}
		    12%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    14%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    16%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    18%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    20%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    45%   {-webkit-transform: translate(100px,0px) scale(0.97,1.03); opacity: 1}
		    50%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    60%   {-webkit-transform: translate(200px,0px); opacity: 0}
		    100%  {-webkit-transform: translate(200px,0px); opacity: 0}
		}
		@-webkit-keyframes che1_ani
		{
		    0%    {opacity: 1}
		    12%   {opacity: 1}
		    14%   {opacity: 0.5}
		    16%   {opacity: 1}
		    18%   {opacity: 0.5}
		    20%   {opacity: 1}
		    100%  {opacity: 1}

		}
		@-webkit-keyframes baoming
		{
		    0%  {opacity: 0}
		    58% {opacity: 0;-webkit-transform: scale(1.4);}
		    59% {opacity: 1;-webkit-transform: scale(1.4);}
		    70% {opacity: 1;-webkit-transform: scale(0.95);}
		    72% {opacity: 1;-webkit-transform: scale(1);}
		    80% {opacity: 0.8;-webkit-transform: scale(1.1);}
		    88% {opacity: 1;-webkit-transform: scale(1);}
		    93% {opacity: 0;-webkit-transform: scale(1.3);}
		    100%{opacity: 0}
		}
		@-webkit-keyframes shijia
		{
		    0%  {-webkit-transform: rotate(20deg) scale(0.8);opacity: 0}
		    10% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
		    20% {-webkit-transform: rotate(20deg) scale(0.85);}
		    28% {-webkit-transform: rotate(20deg) scale(0.75);}
		    38% {-webkit-transform: rotate(20deg) scale(0.85);}
		    47% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
		    55% {-webkit-transform: rotate(20deg) scale(0.90);opacity: 0}
		    100%{opacity: 0}

		}
		@-webkit-keyframes biaozhi_ani
		{
		    0%  {opacity: 0}
		    10% {opacity: 0}
		    20% {opacity: 1}
		    45% {opacity: 1}
		    55% {opacity: 0}
		    100%{opacity: 0}
		}
		#musicinfo
		{
			color: #fff;
			text-shadow: 1px 1px 2px #000;
			font-size: 15px;
			position: fixed;
			left: 432px;
		    top: 82px;
		    width: 60px;
		    height: 20px;
		    z-index: 100;
		    display: none;
		    opacity: 1;
		}
		@-webkit-keyframes heart_beating
		{
			from {opacity: 1;-webkit-transform: scale(1);}
			to   {opacity: 0.8;-webkit-transform: scale(0.8);}
		}
		@-webkit-keyframes heart1_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(-20px,-50px) scale(1.5);}
		}
		@-webkit-keyframes heart2_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(20px,-60px) scale(2);}
		}
		@-webkit-keyframes heart3_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(70px,-40px) scale(2);}
		}
#enddiv
{
    position: absolute;
    width: 500px;
    height: 815px;
    background-color: rgba(0,0,0,0.7);
    z-index: 10000;
    display: none;
    opacity: 0;
}
#title_div
{
    width: 320px;
    height: 200px;
    left: 90px;
    top: 250px;
    color: #fff;
    font-size: 25px;
    position: relative;
    line-height: 45px;
    text-align: center;
    font-family: '微软雅黑';
    display:table;
}
#title_line
{
    position: absolute;
    width: 370px;
    height: 2px;
    background-color: #fff;
    top: 415px;
    left: 65px;
}
#reshowbtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(94,159,177,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 74px;
}
#guanzhubtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(185,91,83,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 268px;
}
@-webkit-keyframes fadein
{
	from  {opacity: 0}
	to    {opacity: 1}
}
	</style>

	
	
	
	